<template>
    <div class="tabbar">
        <img class="tabbar_logo" src="../images/logo.png" alt="">
        <img @click="show = true" class="tabbar_open" src="../images/open.png" alt="">
        <van-popup v-model="show" position="right" :style="{ height: '100%', width: '90%' }">
            <div class="tabbar_side">
                <div class="side_top">
                    <img class="tabbar_logo" src="../images/logo.png" alt="">
                    <img class="tabbar_close" @click="show = false" src="../images/close.png" alt="">
                </div>

                <div class="side_bottom">
                    <div :class="['side_title', { active: msg === '/home' }]" @click="handleUrl('/home')">首页</div>
                    <div :class="['side_title', { active: msg === '/about' }]" @click="handleUrl('/about')">关于我们</div>
                    <!-- <div :class="['side_title', { active: msg === '/product' }]" @click="handleUrl('/product')">产品与服务
                    </div> -->
                    <div :class="['side_title', { active: msg === '/product' }]" @click="productShow = !productShow">
                        产品与服务
                        <img v-if="!productShow" src="../images/arrow.png" alt="">
                        <img v-else src="../images/down.png" alt="">
                    </div>
                    <div class="side_text" v-if="productShow">
                        <div :class="[{ active: msg === '/juhe' }]" @click="handleUrl('/juhe')">聚合支付
                        </div>
                        <div :class="[{ active: msg === '/xianshang' }]" @click="handleUrl('/xianshang')">线上支付
                        </div>
                        <div :class="[{ active: msg === '/xianxiang' }]" @click="handleUrl('/xianxiang')">先享后付
                        </div>
                    </div>
                    <div :class="['side_title', { active: msg === '/solution' }]" @click="solutionShow = !solutionShow">
                        解决方案
                        <img v-if="!solutionShow" src="../images/arrow.png" alt="">
                        <img v-else src="../images/down.png" alt="">
                    </div>
                    <div class="side_text" v-if="solutionShow">
                        <div :class="[{ active: msg === '/solution?id=0' }]" @click="handleUrl('/solution?id=0')">生活娱乐
                        </div>
                        <div :class="[{ active: msg === '/solution?id=1' }]" @click="handleUrl('/solution?id=1')">电商行业
                        </div>
                        <div :class="[{ active: msg === '/solution?id=2' }]" @click="handleUrl('/solution?id=2')">零售行业
                        </div>
                        <!-- <div :class="[{ active: msg === '/solution?id=3' }]" @click="handleUrl('/solution?id=3')">智慧免租
                        </div> -->
                    </div>
                    <div class="side_title" @click="newShow = !newShow">
                        新闻中心
                        <img v-if="!newShow" src="../images/arrow.png" alt="">
                        <img v-else src="../images/down.png" alt="">
                    </div>
                    <div class="side_text" v-if="newShow">
                        <div :class="['side_title', { active: msg === '/news' }]" @click="handleUrl('/news')">新闻动态
                        </div>
                        <div :class="['side_title', { active: msg === '/notice' }]" @click="handleUrl('/notice')"> 公司公告
                        </div>
                    </div>
                    <div :class="['side_title', { active: msg === '/service' }]" @click="handleUrl('service')">服务与支持
                    </div>
                    <div class="side_title" @click="busShow = !busShow">
                        加入我们
                        <img v-if="!busShow" src="../images/arrow.png" alt="">
                        <img v-else src="../images/down.png" alt="">
                    </div>
                    <div class="side_text" v-if="busShow">
                        <div :class="['side_title', { active: msg === '/business' }]" @click="handleUrl('/business')">业务合作
                        </div>
                        <div :class="['side_title', { active: msg === '/hire' }]" @click="handleUrl('/hire')"> 招聘官网
                        </div>
                    </div>
                    <!-- <div :class="['side_title', { active: msg === '/business' }]" @click="handleUrl('business')">加入我们
                    </div> -->
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    name: 'tabbar',
    props: {
        msg: {
            type: String,
        }
    },
    data() {
        return {
            show: false,
            solutionShow: false,
            newShow: false,
            productShow:false,
            busShow:false
        }
    },
    watch: {
        msg(newVal) {
            this.solutionShow = newVal === '/solution?id=0' ||
                newVal === '/solution?id=1' ||
                newVal === '/solution?id=2' ||
                newVal === '/solution?id=3';
            // this.productShow= newVal === '/product?id=0' ||
            //     newVal === '/product?id=1' ||
            //     newVal === '/product?id=2'

        }
    },
    mounted() {
        this.solutionShow = this.msg === '/solution?id=0' ||
            this.msg === '/solution?id=1' ||
            this.msg === '/solution?id=2' ||
            this.msg === '/solution?id=3';
            this.productShow= this.$route.path==='/juhe' || this.$route.path==='/xianshang' || this.$route.path==='/xianxiang'
            this.busShow= this.$route.path==='/business' || this.$route.path==='/hire'
            this.newShow = this.$route.path === '/news' || this.$route.path === '/notice';
    },
    methods: {
        handleUrl(url) {
            this.$router.push({ path: url });
        }
    }
}
</script>
<style scoped lang="scss">
.tabbar {
    width: 100%;
    height: 50px;
    margin: 0 auto;
    padding: 8px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F7F8FA;
    position: fixed;
    z-index: 999;

    .tabbar_logo {
        width: 72px;
    }

    .tabbar_open {
        width: 30px;
    }
}

.tabbar_side {
    .side_top {
        padding: 8px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        background: #F7F8FA;

        .tabbar_logo {
            width: 82px;
        }

        .tabbar_close {
            width: 20px;
        }
    }
}

.side_bottom {
    padding: 20px 30px;
    box-sizing: border-box;

    .side_title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        margin-bottom: 20px;
        color: #333333;
        display: flex;
        align-items: center;

        img {
            width: 9px;
            margin-left: 10px;
        }
    }

    .side_text {
        padding-left: 16px;

        div {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            margin-bottom: 20px;
        }

    }
}

.active {
    color: #006FBC !important;
    font-weight: 500 !important;
}
</style>